<template>
           <div class="swiper"  ref="swiper" v-if="skuImageList">
                 <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(list,index) in ImageList" :key="list.id" @click="Get_Swiper(index)">
                        <a href.prevent="">
                            <img :src="list.imgUrl" alt="">
                        </a>
                    </div>
                </div>
                                
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>                 
</template>

<script>
import Swiper from 'swiper'
export default {
    name:'Imagelist',
    props:['skuImageList'],
    watch:{
        // 轮播图
        ImageList:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                     new Swiper (this.$refs.swiper, {
                        // loop: true, // 循环模式选项
                        // 如果需要前进后退按钮
                        navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                        },
                        slidesPerView : 3,
                        slidesPerGroup : 3,
                    }) 
                })
            }
        }
    },
    computed: {
        ImageList(){
            return this.skuImageList || []
        }
       
    },
    methods: {
        // 发送点击的图片索引给父级
        Get_Swiper(img){
            this.$bus.$emit('getSwiper',img);
        }
    },
}
</script>

<style scoped lang='less'>
    .swiper{
            position: relative;
            height: 52px;
            margin-top: 5px;
            overflow: hidden;
            .swiper-slide{
                height: 50px;
            }
            img{
                height: 50px;
                width: 50px;
                border: 1px solid #CCC;
            }
            .swiper-button-prev,.swiper-button-next{
                border: 1px solid #CCC;
                background: #EBEBEB;
                top: 0;
                margin: 0;
                padding: 0px 1px;
                --swiper-navigation-size:10px;
                height: 50px;
            }
            .swiper-button-prev{
                left: 0;
            }
            .swiper-button-next{
                right: 0;
            }
            .swiper-wrapper{
                left: 40px;
                width: 372px;
            }
    }
    
</style>